Images

Images are used to provide a visual representation of context. When an avatar isn’t available for an object, the object icon will always be displayed in it’s place.

Avatarsdev ready

Preview

Code

<span class="slds-avatar slds-avatar--x-small">
  <img src="/assets/images/avatar2.jpg" alt="person name" />
</span>

An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires .slds-avatar as the base class. Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the .slds-avatar--circle class. Four additional classes are available for sizing.

Component Overview

Accessibility

Every <img> you add to your site needs to have an alt attribute. If the image is informational, set the alt equal to a descriptive alternative for that image. If the image is decorative or redundant to adjacent text, set alt="", which conveys to assistive technology users that the image isn’t necessary for understanding the page. Avoid using generic strings like photo, image, or icon as alt values, as they don’t communicate valuable content to the user.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create avatars.
Class NameUsage
.slds-avatar
Applied to:

span

Outcome:

Defines an image as an avatar

Required:

Required

Comments:

By default avatars have a rounded square shape

.slds-avatar--circle
Applied to:

.slds-avatar

Outcome:

Creates a circular avatar shape

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--x-small
Applied to:

.slds-avatar

Outcome:

Creates a 1.5rem×1.5rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--small
Applied to:

.slds-avatar

Outcome:

Creates a 2.25rem×2.25rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--medium
Applied to:

.slds-avatar

Outcome:

Creates a 3rem×3rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--large
Applied to:

.slds-avatar

Outcome:

Creates a 5rem×5rem icon

Required:

No, optional element or modifier

Comments:

--